<template>
    <div id="Typewriter">
        <div id="typewriter" ref="typewriter" :class="animateClass">{{ textContent }}</div>
    </div>
</template>

<script>
export default {
    props: ['textLength', 'textContent'], // 接收文字数量和文字内容
    data() {
        return {
            animateClass: ''
        }
    },
    mounted() {
        // 添加逐个显示动画
        document.styleSheets[0].insertRule(
            `
            @keyframes typewriter {
                from {
                    width: 0;
                }
                to {
                    width: ${this.textLength * 30 + 'px'};
                }
            }
            `
        )
        // 添加闪烁动画
        document.styleSheets[0].insertRule(`
        @keyframes blink {
            from {
                border-right-color: $color-main-text;
            }
            to {
                border-right-color: transparent;
            }
        }
        `)
        // 定义.animate类
        document.styleSheets[0].insertRule(`
        .animate {
            animation: typewriter 4s steps(${this.textLength}) 1s normal both, blink 500ms steps(${this.textLength}) infinite normal;
        }
        `)
        this.animateClass = 'animate' // 为文本块添加.animate类样式
    }
}
</script>

<style lang="scss" scoped>
#typewriter {
    font-size: $font-size-medium; // 30px字大小
    font-weight: $font-weight-medium;
    margin: 0 auto;
    border-right: 5px solid $color-text;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    transition: all .5s;
}
</style>